Lists

A list groups related content together.

Dotteddev ready

Preview

Code

<ul>
  <li>Basic un-ordered list</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
<ul class="slds-list--dotted">
  <li>Dotted un-ordered list</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

If a list is not inside a .slds-text-longform element, but needs list item markers, use .slds-list--dotted for an unordered list.

Ordereddev ready

Preview

Code

<ol>
  <li>Basic ordered list</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>
<ol class="slds-list--ordered">
  <li>Numeric ordered list</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>

If a list is not inside a .slds-text-longform element, but needs list item markers, use .slds-list--ordered for an ordered list.

Verticaldev ready

Preview

Code

<ul class="slds-list--vertical">
  <li class="slds-list__item">Vertical List</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">List Item</li>
</ul>
<ul class="slds-list--vertical slds-has-block-links">
  <li class="slds-list__item"><a href="#void">Vertical List with block level links</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--vertical slds-has-block-links--space">
  <li class="slds-list__item"><a href="#void">Vertical List with block level links with space</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--vertical slds-has-inline-block-links">
  <li class="slds-list__item"><a href="#void">Vertical List with inline-block level links</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--vertical slds-has-inline-block-links--space">
  <li class="slds-list__item"><a href="#void">Vertical List with inline-block level links with space</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--vertical">
  <li class="slds-list__item">Vertical List with nested vertical lists</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">
    <ul class="slds-list--vertical slds-is-nested">
      <li class="slds-list__item">Nested Vertical List</li>
      <li class="slds-list__item">List Item</li>
      <li class="slds-list__item">
        <ul class="slds-list--vertical slds-is-nested">
          <li class="slds-list__item">Nested Vertical List</li>
          <li class="slds-list__item">List Item</li>
          <li class="slds-list__item">List Item</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

A vertical list stacks like a normal <ul>. To indent nested items, add the .slds-is-nested class to the <ul> nested inside.

The vertical list accepts other helpful utilities that can alter the look of the list items. If you have anchor links in your list items, adding the class .slds-has-block-links or .slds-has-inline-block-links to the <ul> will set a display block or inline-block to the anchor links. If you have anchor links within your vertical list and want spacing on the links, using .slds-has-block-links-space will reset the spacing on the list item and re-apply that padding to the anchor link.

Has Dividerdev ready

Preview

Code

<ul class="slds-list--vertical">
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item slds-has-divider--top-space">List Item</li>
</ul>

This divider utility can be applied to any vertical list item or menu item to separate the items within. It creates a single border with space.

Vertical With Dividersdev ready

Preview

Code

<ul class="slds-list--vertical slds-has-dividers--top">
  <li class="slds-list__item">List item with top divider</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">List Item</li>
</ul>
<ul class="slds-list--vertical slds-has-dividers--top-space">
  <li class="slds-list__item">List item with top divider with space</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">List Item</li>
</ul>
<ul class="slds-list--vertical slds-has-dividers--bottom">
  <li class="slds-list__item">List item with bottom divider</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">List Item</li>
</ul>
<ul class="slds-list--vertical slds-has-dividers--bottom-space">
  <li class="slds-list__item">List item with bottom divider with space</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">List Item</li>
</ul>
<ul class="slds-list--vertical slds-has-dividers--bottom slds-has-block-links">
  <li class="slds-list__item"><a href="#void">List item block level link with bottom divider</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--vertical slds-has-dividers--bottom-space slds-has-block-links--space">
  <li class="slds-list__item"><a href="#void">List item block level link with bottom divider with space</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--vertical slds-has-dividers--bottom slds-has-block-links--space slds-has-list-interactions">
  <li class="slds-list__item"><a href="#void">List item block level link with bottom divider with space with list item interactions</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>

The vertical list with dividers adds spacing and a line border between list items. There are a handful of variations to choose from that will give different outcomes such as top or bottom dividers. This is achieved by adding the class .slds-has-dividers--top or .slds-has-dividers--bottom to the <ul>. Additionally, spacing can be applied to the list items by adding the class .slds-has-dividers--top-space or .slds-has-dividers--bottom-space to the <ul>. If the divider with spacing classes are used, note that on a smaller device, the spacing is slightly increased to accomodate for touch devices.

The vertical list with dividers accepts other helpful utilities that can alter the look of the list items. If you have anchor links in your list items, adding the class .slds-has-block-links or .slds-has-inline-block-links to the <ul> will set a display block or inline-block to the anchor links. If you have anchor links within your vertical list and want spacing on the links, using .slds-has-block-links-space will reset the spacing on the list item and re-apply that padding to the anchor link.

By default, the list items in the vertical list have no interaction states, such as hover or selected. Adding .slds-has-list-interactions to the <ul> will output hover styles and target specific classes that should be added by JavaScript. Using JavaScript, on selection of a list item, toggling .slds-is-selected to the <li> will output styles informing the user that the list item is selected.

Vertical With Cardsdev ready

Preview

Code

<ul class="slds-list--vertical slds-has-cards">
  <li class="slds-list__item">Vertical List with cards</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">List Item</li>
</ul>
<ul class="slds-list--vertical slds-has-cards--space">
  <li class="slds-list__item">Vertical List with cards with space</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">List Item</li>
</ul>
<ul class="slds-list--vertical slds-has-cards slds-has-block-links">
  <li class="slds-list__item"><a href="#void">Vertical List with cards with block level links</a></li>
  <li class="slds-list__item"><a href="#void">List Item Two</a></li>
  <li class="slds-list__item"><a href="#void">List Item Three</a></li>
</ul>
<ul class="slds-list--vertical slds-has-cards slds-has-block-links--space">
  <li class="slds-list__item"><a href="#void">Vertical List with cards with block level links with space</a></li>
  <li class="slds-list__item"><a href="#void">List Item Two</a></li>
  <li class="slds-list__item"><a href="#void">List Item Three</a></li>
</ul>
<ul class="slds-list--vertical slds-has-cards slds-has-inline-block-links">
  <li class="slds-list__item"><a href="#void">Vertical List with cards with inline-block level links</a></li>
  <li class="slds-list__item"><a href="#void">List Item Two</a></li>
  <li class="slds-list__item"><a href="#void">List Item Three</a></li>
</ul>
<ul class="slds-list--vertical slds-has-cards slds-has-inline-block-links--space">
  <li class="slds-list__item"><a href="#void">Vertical List with cards with inline-block level links with space</a></li>
  <li class="slds-list__item"><a href="#void">List Item Two</a></li>
  <li class="slds-list__item"><a href="#void">List Item Three</a></li>
</ul>
<ul class="slds-list--vertical slds-has-cards slds-has-block-links--space slds-has-list-interactions">
  <li class="slds-list__item"><a href="#void">Vertical List with cards with block level links with space with list item interactions</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>

The vertical list with cards adds spacing and a line border around list items. Spacing can be applied to the list items by adding the class .slds-has-cards--space to the <ul>. If the cards with spacing class is used, note that on a smaller device, the spacing is slightly increased to accomodate for touch devices.

The vertical list with cards accepts other helpful utilities that can alter the look of the list items. If you have anchor links in your list items, adding the class .slds-has-block-links or .slds-has-inline-block-links to the <ul> will set a display block or inline-block to the anchor links. If you have anchor links within your vertical list and want spacing on the links, using .slds-has-block-links-space will reset the spacing on the list item and re-apply that padding to the anchor link.

By default, the list items in the vertical list have no interaction states, such as hover or selected. Adding .slds-has-list-interactions to the <ul> will output hover styles and target specific classes that should be adding by JavaScript. Using JavaScript, on selection of a list item, toggling .slds-is-selected to the <li> will output styles informing the user that the list item is selected.

Horizontaldev ready

Preview

Code

<ul class="slds-list--horizontal">
  <li class="slds-list__item">Horizontal List</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">List Item</li>
</ul>
<ul class="slds-list--horizontal">
  <li class="slds-list__item"><a href="#void">Horizontal List with inline level links</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--horizontal slds-has-block-links">
  <li class="slds-list__item"><a href="#void">Horizontal List with block level links</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--horizontal slds-has-inline-block-links">
  <li class="slds-list__item"><a href="#void">Horizontal List with inline-block level links</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--horizontal slds-has-inline-block-links--space">
  <li class="slds-list__item"><a href="#void">Horizontal List with inline-block level links with space</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>

A horizontal list aligns the list items horizontally from left to right.

The horizontal list accepts other helpful utilities that can alter the look of the list items. If you have anchor links in your list items, adding the class .slds-has-inline-block-links or .slds-has-block-links to the <ul class=slds-list--horizontal> will set a display inline-block or block to the anchor links. If you have anchor links within your horizontal list with dividers and want spacing on the links, using .slds-has-inline-block-links-space will reset the spacing on the list item and re-apply that padding to the anchor link.

Horizontal With Dividersdev ready

Preview

Code

<ul class="slds-list--horizontal slds-has-dividers--right">
  <li class="slds-list__item">Horizontal List with dot dividers</li>
  <li class="slds-list__item">List Item</li>
  <li class="slds-list__item">List Item</li>
</ul>
<ul class="slds-list--horizontal slds-has-dividers--right">
  <li class="slds-list__item"><a href="#void">Horizontal List with dot dividers with inline level links</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--horizontal slds-has-dividers--right slds-has-inline-block-links">
  <li class="slds-list__item"><a href="#void">Horizontal List with dot dividers with inline-block level links</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>
<ul class="slds-list--horizontal slds-has-dividers--right slds-has-inline-block-links--space">
  <li class="slds-list__item"><a href="#void">Horizontal List with dot dividers with inline-block level links with space</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
  <li class="slds-list__item"><a href="#void">List Item</a></li>
</ul>

The horizontal list with dividers adds spacing and a dot separator between list items in a horizontal list. There are a handful of variations to choose from that will give different outcomes such as left or right dot separator. This is achieved by adding the class .slds-has-dividers--left or .slds-has-dividers--right to <ul class=slds-list--horizontal>. Additionally, spacing can be applied to the list items by adding the class .slds-has-dividers--left-space or .slds-has-dividers--right-space to <ul class=slds-list--horizontal>.

The horizontal list with dividers accepts other helpful utilities that can alter the look of the list items. If you have anchor links in your list items, adding the class .slds-has-inline-block-links to the <ul> will set inline-block to the anchor links. Because we are dealing with a horizontal list, by default, the anchor links have an inline display. We want to stick with only using the default inline display or .slds-has-inline-block-links, refrain from using .slds-has-block-links on a horizontal list with dividers. This is due to the dot separators being generated as a psuedo element and having a block level display on the anchor links will introduce visual bugs. If you have anchor links within your horizontal list with dividers and want spacing on the links, using .slds-has-inline-block-links-space will reset the spacing on the list item and re-apply that padding to the anchor link.

The dot separators on the list items in a horizontal list with dividers don’t appear before the first item or after the last item.

Description Inlinedev ready

Preview

Code

<dl>
  <dt>Basic Description List Label</dt>
  <dd>First description</dd>
  <dd>Second description</dd>
</dl>
<dl class="slds-dl--inline">
  <dt class="slds-dl--inline__label">Inline Description List Label:</dt>
  <dd class="slds-dl--inline__detail">First description</dd>
  <dt class="slds-dl--inline__label">Second Label:</dt>
  <dd class="slds-dl--inline__detail">Description for second label</dd>
</dl>

Description lists <dl> are used when you have a term <dt> and information that describes it <dd>. A description list can contain more than one term for a description. It can also contain more than one description for a term. A <dl> should hold multiple <dt> + <dd> groupings.

By default, the <dt> and <dd> stack. No extra class is required. Adding .slds-dl--inline formats the <dl> so that the <dd> immediately follows the <dt>. Be aware that for inline styling, you will not be able to differentiate between multiple <dt> or <dd>.

Description Horizontaldev ready

Preview

Code

<dl>
  <dt>Basic Description List Label</dt>
  <dd>Basic Description List Detail</dd>
</dl>
<dl class="slds-dl--horizontal">
  <dt class="slds-dl--horizontal__label">Horizontal Description List Label</dt>
  <dd class="slds-dl--horizontal__detail">First Horizontal Description List Detail</dd>
  <dt class="slds-dl--horizontal__label">Second Label</dt>
  <dd class="slds-dl--horizontal__detail">Second description</dd>
</dl>

Description lists <dl> are used when you have a term <dt> and information that describes it <dd>. A description list can contain more than one term for a description. It can also contain more than one description for a term. A <dl> should hold multiple <dt> + <dd> groupings.

By default, the <dt> and <dd> stack. No extra class is required. Adding .slds-dl--horizontal gives the <dt> a width (1/3) and the <dd> a 2/3 width. This means that for styling, the <dd> all start at the same horizontal alignment. You can override the widths by putting a sizing helper on the <dt> and <dd> elements. The sizing helpers used should add up to 100% width to keep the rows evenly spaced. Be aware that for horizontal styling, using more than one <dd> with a single <dt> will cause a visual misalignment.

Component Overview

This CSS framework is built to create enterprise applications, so lists rarely need their default styling. All lists start by having their defaults reset to margin: 0 and padding: 0 with no list markers. When using a screen reader, a list is announced along with the number of items it contains.

When creating a basic page rather than application style, surround the group of headings, paragraphs, and lists with the .slds-text-longform class to retain their default spacing.

By default, a list is vertical, but you can change it to horizontal using these utility classes.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-list--dotted
Applied to:

ul

Outcome:

Creates an unordered list with markers

Required:

No, optional element or modifier

Comments:

Our application framework takes away default list styling. This recreates it

.slds-list--ordered
Applied to:

ol

Outcome:

Creates an ordered list with decimals

Required:

No, optional element or modifier

Comments:

Our application framework removes default list styling. This recreates it

.slds-list--vertical
Applied to:

ul

Outcome:

Marks a vertical list

Required:

No, optional element or modifier

Comments:

--

.slds-list--horizontal
Applied to:

ul

Outcome:

Causes list to display horizontally

Required:

No, optional element or modifier

Comments:

This lists stacks in a mobile context

.slds-list__item
Applied to:

li

Outcome:

Marks a list item

Required:

No, optional element or modifier

Comments:

All lists use this class. Different CSS applies depending on the parent class.

.slds-dl--inline
Applied to:

dl

Outcome:

Causes description list to display horizontally with dt followed immediately by the dd.

Required:

No, optional element or modifier

Comments:

This lists stacks in a mobile context

.slds-dl--inline__label
Applied to:

dt

Outcome:

Marks a term

Required:

No, optional element or modifier

Comments:

--

.slds-dl--inline__detail
Applied to:

dd

Outcome:

Marks a description

Required:

No, optional element or modifier

Comments:

--

.slds-dl--horizontal
Applied to:

dl

Outcome:

Causes description list to display horizontally with dt consuming 33% of the space and the dd taking up the rest.

Required:

No, optional element or modifier

Comments:

This lists stacks in a mobile context. It can also take different sizing utilities to change the widths (which must always total 100%).

.slds-dl--horizontal__label
Applied to:

dt

Outcome:

Marks a term

Required:

No, optional element or modifier

Comments:

--

.slds-dl--horizontal__detail
Applied to:

dd

Outcome:

Marks a description

Required:

No, optional element or modifier

Comments:

--

.slds-has-block-links
Applied to:

.slds-list--vertical or .slds-list--vertical

Outcome:

Gives the anchors within the list block styling

Required:

No, optional element or modifier

Comments:

--

.slds-has-inline-block-links
Applied to:

.slds-list--vertical or .slds-list--vertical

Outcome:

Gives the anchors within the list inline-block styling

Required:

No, optional element or modifier

Comments:

--

.slds-has-block-links--space
Applied to:

.slds-list--vertical or .slds-list--vertical

Outcome:

Gives the anchors within the list block styling with 0.5rem padding

Required:

No, optional element or modifier

Comments:

--

.slds-has-inline-block-links--space
Applied to:

.slds-list--vertical or .slds-list--vertical

Outcome:

Gives the anchors within the list inline-block styling with 0.5rem padding

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers
Applied to:

.slds-list--vertical
.slds-list--horizontal

Outcome:

Adds spacing and dividers between list items

Required:

No, optional element or modifier

Comments:

Deprecated - Both vertical and horizontal lists use this class when separators are needed.
On vertical lists a border is added. Horizontal lists are separated by a dot.

.slds-has-dividers--top
Applied to:

.slds-list--vertical

Outcome:

Adds 1px border divider above list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--bottom
Applied to:

.slds-list--vertical

Outcome:

Adds 1px border divider below list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--top-space
Applied to:

.slds-list--vertical

Outcome:

Adds 1px border divider above list items and 0.5rem padding between list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--bottom-space
Applied to:

.slds-list--vertical

Outcome:

Adds 1px border divider below list items and 0.5rem padding between list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--left
Applied to:

.slds-list--horizontal

Outcome:

Adds dot separators to the left of horizontal list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--right
Applied to:

.slds-list--horizontal

Outcome:

Adds dot separators to the right of horizontal list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-cards
Applied to:

.slds-list--vertical

Outcome:

Adds 1px border around list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-cards--space
Applied to:

.slds-list--vertical

Outcome:

Adds 1px border around list items and 0.5rem padding inside list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-list-interactions
Applied to:

.slds-list__item

Outcome:

Adds hover and selected styles to list items

Required:

No, optional element or modifier

Comments:

the selected class .slds-is-selected needs to be applied via JavaScript